<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
                xmlns:ezcomp="http://xmlns.jcp.org/jsf/composite/ezcomp">

    <ui:define name="content">
        <style>
            .panel-header {
                background-color: #007bff;
                color: white;
                padding: 15px;
                border-bottom: 1px solid #0069d9;
                font-weight: bold;
                font-size: 24px;
                text-align: center;
                border-radius: 5px 5px 0 0;
                margin-bottom: 20px; /* 增加底部间距 */
            }
            .panel-content {
                padding: 20px;
                background-color: #f8f9fa;
                border-radius: 0 0 5px 5px;
                margin-top: 20px; /* 增加上方间距 */
            }
            .data-table-header {
                background-color: #f8f9fa;
                font-weight: bold;
                text-align: center;
                border-bottom: 1px solid #dee2e6;
            }
            .data-table-cell {
                padding: 10px;
                text-align: center;
                border-bottom: 1px solid #dee2e6;
            }
            .ui-growl {
                z-index: 11000;
            }
            .button-group {
                display: flex;
                justify-content: flex-end;
                margin-top: 20px; /* 增加上方间距 */
                margin-bottom: 20px; /* 增加底部间距 */
            }
        </style>

        <h:form id="biaodanForm">
            <p:panel id="biaodan" styleClass="panel-header">
                <!-- 标题 -->
                <span>1月报销汇总</span>
            </p:panel>
            <p:growl id="msg" life="26500" styleClass="ui-growl" />
            <div class="button-group">
                <p:commandButton value="查询" icon="pi pi-search" process="@form"
                                 update="msg, expenseTable"
                                 actionListener="#{mkzbd.bb('reimburse').mc.selectReimbursementSummary}"
                                 styleClass="ui-button-primary menu-button" />
            </div>

            <p:panel id="bdLists" styleClass="panel-content" style="height: calc(100% - 160px); position: relative; overflow: hidden; margin-top: 20px;">
                <!-- 表格 -->
                <p:dataTable emptyMessage="暂无数据" id="expenseTable" var="expense" rowIndexVar="lia" showGridlines="true"
                             stripedRows="true" resizableColumns="true" selectionMode="single" selection="#{mkzbd.bb('reimburse').mc.lbselectrow}"
                             value="#{mkzbd.bb('reimburse').mc.emptyList}" reflow="true" styleClass="p-datatable-sm p-datatable-striped"
                             scrollable="true" scrollHeight="calc(100% - 40px)"
                             rowKey="#{expense.id}" paginator="true" rows="10"
                             paginatorPosition="bottom" rowsPerPageTemplate="10,20,50,100"
                             sortBy="#{expense.time}" sortOrder="descending">
                    <p:column headerText="姓名" styleClass="data-table-header" style="width: 10%;">
                        <h:outputText value="#{expense.name}" styleClass="data-table-cell" />
                    </p:column>
                    <p:column headerText="住勤补助" styleClass="data-table-header" style="width: 15%;" sortBy="#{expense.zqbs}">
                        <h:outputText value="#{expense.zqbs}" styleClass="data-table-cell" />
                    </p:column>
                    <p:column headerText="加油费" styleClass="data-table-header" style="width: 10%;" sortBy="#{expense.jyf}">
                        <h:outputText value="#{expense.jyf}" styleClass="data-table-cell" />
                    </p:column>
                    <p:column headerText="交通费" styleClass="data-table-header" style="width: 10%;" sortBy="#{expense.jtjf}">
                        <h:outputText value="#{expense.jtjf}" styleClass="data-table-cell" />
                    </p:column>
                    <p:column headerText="招待费" styleClass="data-table-header" style="width: 10%;" sortBy="#{expense.zzdf}">
                        <h:outputText value="#{expense.zzdf}" styleClass="data-table-cell" />
                    </p:column>
                    <p:column headerText="办公费" styleClass="data-table-header" style="width: 10%;" sortBy="#{expense.bgjf}">
                        <h:outputText value="#{expense.bgjf}" styleClass="data-table-cell" />
                    </p:column>
                    <p:column headerText="福利费" styleClass="data-table-header" style="width: 10%;" sortBy="#{expense.fljf}">
                        <h:outputText value="#{expense.fljf}" styleClass="data-table-cell" />
                    </p:column>
                    <p:column headerText="合计" styleClass="data-table-header" style="width: 10%;" sortBy="#{expense.total}">
                        <h:outputText value="#{expense.total}" styleClass="data-table-cell" />
                    </p:column>
                </p:dataTable>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>